<docs>
  ## input输入元素
</docs>
<template>
  <div :class="`weui-cell ${valid === status.REJECTED ? 'weui-cell_warn' : ''}`">
   <!-- class="weui-cell" > -->
    <div class="weui-cell__hd">
      <label class="weui-label">{{label}}</label>
    </div>
    <div class="weui-cell__bd">
      <input :type="type" class="weui-input" @input="$emit('input', $event.target.value)"
        :value="value" @blur="validItem" @focus="resetValid"
        :maxlength="maxLength" :placeholder="placeholder" :disabled="disabled" :readonly="readonly">
      <!-- <span v-show="money==1" class="dw">(单位：K)</span> -->
      <!-- <i class="iconfont icon-close input_close" v-show="VisibleClose" :value="value" @click="clearVal(value)"></i> -->
    </div>
    <div class="weui-cell__ft" v-show="valid === status.REJECTED">
      <i class="weui-icon-warn"></i>
    </div>
  </div>
</template>
<script>
import { mixinValid } from 'common/mixins/mixins';

export default {
  name: 'co-input',
  props: {
    label: String,
    placeholder: String,
    maxLength: String,
    prop: String,
    rules: Object,
    type: {
      type: String,
      default: 'text'
    },
    // money: {
    //   type: Number,
    //   default: '0'
    // },
    value: String,
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
  },
  // data() {
  //   return {
  //     VisibleClose: false
  //   };
  // },
  // watch:{
  //   value: function(val){
  //     console.log(val)
  //     if (val && !this.disabled) this.VisibleClose = true;
  //   }
  // },
  mixins: [mixinValid],
  // methods:{
  //   clearVal(val){
  //     this.VisibleClose = false;
  //     this.$nextTick(_=>{
  //       this.validItem();
  //     })
  //     val = '';
  //     this.$emit('input', val);
  //   }
  // }
};
</script>
<style scoped lang="scss">
@import '~common/scss/var.scss';
.weui-label {
  @include label;
}
.weui-input {
  @include input-text;
}
.input_close {
  display: inline-block;
  position: absolute;
  top: 25px;
  right: 50px;
  height: 36px;
  width: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 18px;
  background-color: #DEDEDE;
  font-size: 21px;
  font-weight: bold;
  color: #fff;
}
  .dw{
    position: absolute;
    right: 30px;
    top: 12px;
  }
</style>
